<!--
 * @Description: -+
 * @Version: 2.0
 * @Autor: wiz
 * @Date: 2023-10-18 09:50:39
 * @LastEditors: swc
 * @LastEditTime: 2025-03-26 13:21:48
-->
<template>
  <div class="containers">
    <div class="log y-scroll clear">
      <div class="log-nav">
        <div class="date-body">
          <div class="nav-title">{{ $srv.getI18nByValue('日历导航') }}</div>

          <div class="sle-date">
            <DatePicker
              :value="rangeData"
              type="daterange"
              @on-change="handleChange"
              placement="bottom-start"
              :placeholder="$srv.getI18nByValue('选择日期范围')"
              style="width: 200px"
              show-week-numbers
              transfer
            ></DatePicker>
            &nbsp;&nbsp;<span>{{ $srv.getI18nByValue('期间数据') }}</span
            >&nbsp;&nbsp;
            <Button type="primary" @click="search" shape="circle">查询</Button>
          </div>

          <div class="data-content">
            <div class="date_radio">
              <div class="radio_left">
                <RadioGroup v-model="currentType">
                  <Radio label="day">
                    <span>{{ $srv.getI18nByValue('日') }}</span>
                  </Radio>
                  <Radio label="week">
                    <span>{{ $srv.getI18nByValue('周') }}</span>
                  </Radio>
                  <Radio label="month">
                    <span>{{ $srv.getI18nByValue('月') }}</span>
                  </Radio>
                </RadioGroup>
              </div>
              <div class="radio_right">
                <span>{{ $srv.getI18nByValue('格式查询') }}</span>
              </div>
            </div>
            <div class="main_box">
              <!-- <div class="left_box">
              <RadioGroup v-model="selectDate" vertical>
                <Radio disabled label="front">
                  <span>{{ $srv.getI18nByValue('前') }}</span>
                </Radio>
                <Radio label="current">
                  <span>{{ $srv.getI18nByValue('今') }}</span>
                </Radio>
              </RadioGroup>
            </div> -->
              <div class="right_box" ref="right-box">
                <calendar
                  v-if="currentType === 'day'"
                  :attributes="attrs"
                  @dayclick="dayClick"
                  color="blue"
                  is-expanded
                  show-weeknumbers="left"
                  trim-weeks
                  ref="calendar"
                  class="nav-option"
                >
                  <template #day-popover="{ dayTitle, attributes }">
                    <div style="max-width: 240px; white-space: wrap">
                      <div
                        class="text-xs text-gray-300 font-semibold text-center"
                      >
                        {{ dayTitle }}
                      </div>
                      <div v-for="attr in attributes" :key="attr.key">
                        <popover-row
                          v-for="description in attr.customData.description"
                          :key="description.key"
                          :attribute="attr"
                        >
                          {{ description }}
                        </popover-row>
                      </div>
                    </div>
                  </template>
                </calendar>
                <pm-weeks
                  v-if="currentType === 'week'"
                  ref="weeks"
                  @weekRowClick="weekRowClick"
                  class="nav-option"
                />
                <pm-months
                  v-if="currentType === 'month'"
                  ref="months"
                  @monthClick="monthClicks"
                  class="nav-option"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="info-body">
          <div class="info-content">
            <Tabs name="info">
              <TabPane
                :label="
                  currentType === 'month'
                    ? $srv.getI18nByValue('当年数据')
                    : $srv.getI18nByValue('当月数据')
                "
                tab="info"
              >
                <!-- <List
                  border
                  class="y-scroll panelList"
                  v-if="statisticalData.total.length !== 0"
                >
                  <ListItem
                    v-for="(item, id) in currentType === 'month'
                      ? statisticalData.currentYear
                      : statisticalData.currentMonth"
                    :key="id"
                    :title="item"
                    ><span>{{ item }}</span></ListItem
                  >
                </List> -->
                <div
                  class="panel-list"
                  v-if="statisticalData.total.length !== 0"
                >
                  <ul class="y-scroll">
                    <li
                      v-for="(item, id) in currentType === 'month'
                        ? statisticalData.currentYear
                        : statisticalData.currentMonth"
                      :key="id"
                    >
                      <span>{{ item }}</span>
                    </li>
                  </ul>
                </div>
                <div class="no-info" v-else>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="200"
                    width="200"
                  >
                    <g style="order: -1">
                      <polygon
                        transform="rotate(45 100 100)"
                        stroke-width="1"
                        stroke="#d3a410"
                        fill="none"
                        points="70,70 148,50 130,130 50,150"
                        id="bounce"
                      ></polygon>
                      <polygon
                        transform="rotate(45 100 100)"
                        stroke-width="1"
                        stroke="#d3a410"
                        fill="none"
                        points="70,70 148,50 130,130 50,150"
                        id="bounce2"
                      ></polygon>
                      <polygon
                        transform="rotate(45 100 100)"
                        stroke-width="2"
                        stroke=""
                        fill="#414750"
                        points="70,70 150,50 130,130 50,150"
                      ></polygon>
                      <polygon
                        stroke-width="2"
                        stroke=""
                        fill="url(#gradiente)"
                        points="100,70 150,100 100,130 50,100"
                      ></polygon>
                      <defs>
                        <linearGradient
                          y2="100%"
                          x2="10%"
                          y1="0%"
                          x1="0%"
                          id="gradiente"
                        >
                          <stop
                            style="stop-color: #1e2026; stop-opacity: 1"
                            offset="20%"
                          ></stop>
                          <stop
                            style="stop-color: #414750; stop-opacity: 1"
                            offset="60%"
                          ></stop>
                        </linearGradient>
                      </defs>
                      <polygon
                        transform="translate(20, 31)"
                        stroke-width="2"
                        stroke=""
                        fill="#b7870f"
                        points="80,50 80,75 80,99 40,75"
                      ></polygon>
                      <polygon
                        transform="translate(20, 31)"
                        stroke-width="2"
                        stroke=""
                        fill="url(#gradiente2)"
                        points="40,-40 80,-40 80,99 40,75"
                      ></polygon>
                      <defs>
                        <linearGradient
                          y2="100%"
                          x2="0%"
                          y1="-17%"
                          x1="10%"
                          id="gradiente2"
                        >
                          <stop
                            style="stop-color: #d3a51000; stop-opacity: 1"
                            offset="20%"
                          ></stop>
                          <stop
                            style="stop-color: #d3a51054; stop-opacity: 1"
                            offset="100%"
                            id="animatedStop"
                          ></stop>
                        </linearGradient>
                      </defs>
                      <polygon
                        transform="rotate(180 100 100) translate(20, 20)"
                        stroke-width="2"
                        stroke=""
                        fill="#d3a410"
                        points="80,50 80,75 80,99 40,75"
                      ></polygon>
                      <polygon
                        transform="rotate(0 100 100) translate(60, 20)"
                        stroke-width="2"
                        stroke=""
                        fill="url(#gradiente3)"
                        points="40,-40 80,-40 80,85 40,110.2"
                      ></polygon>
                      <defs>
                        <linearGradient
                          y2="100%"
                          x2="10%"
                          y1="0%"
                          x1="0%"
                          id="gradiente3"
                        >
                          <stop
                            style="stop-color: #d3a51000; stop-opacity: 1"
                            offset="20%"
                          ></stop>
                          <stop
                            style="stop-color: #d3a51054; stop-opacity: 1"
                            offset="100%"
                            id="animatedStop"
                          ></stop>
                        </linearGradient>
                      </defs>
                      <polygon
                        transform="rotate(45 100 100) translate(80, 95)"
                        stroke-width="2"
                        stroke=""
                        fill="#ffe4a1"
                        points="5,0 5,5 0,5 0,0"
                        id="particles"
                      ></polygon>
                      <polygon
                        transform="rotate(45 100 100) translate(80, 55)"
                        stroke-width="2"
                        stroke=""
                        fill="#ccb069"
                        points="6,0 6,6 0,6 0,0"
                        id="particles"
                      ></polygon>
                      <polygon
                        transform="rotate(45 100 100) translate(70, 80)"
                        stroke-width="2"
                        stroke=""
                        fill="#fff"
                        points="2,0 2,2 0,2 0,0"
                        id="particles"
                      ></polygon>
                      <polygon
                        stroke-width="2"
                        stroke=""
                        fill="#292d34"
                        points="29.5,99.8 100,142 100,172 29.5,130"
                      ></polygon>
                      <polygon
                        transform="translate(50, 92)"
                        stroke-width="2"
                        stroke=""
                        fill="#1f2127"
                        points="50,50 120.5,8 120.5,35 50,80"
                      ></polygon>
                    </g>
                  </svg>
                </div>
              </TabPane>
              <TabPane :label="$srv.getI18nByValue('总数据')" tab="info">
                <!-- <List
                  border
                  class="y-scroll panelList"
                  v-if="statisticalData.total.length !== 0"
                >
                  <ListItem
                    v-for="(item, id) in statisticalData.total"
                    :key="id"
                    :title="item"
                    ><span>{{ item }}</span></ListItem
                  >
                </List> -->
                <div
                  class="panel-list"
                  v-if="statisticalData.total.length !== 0"
                >
                  <ul class="y-scroll">
                    <li v-for="(item, id) in statisticalData.total" :key="id">
                      <span>{{ item }}</span>
                    </li>
                  </ul>
                </div>
                <div class="no-info" v-else>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="200"
                    width="200"
                  >
                    <g style="order: -1">
                      <polygon
                        transform="rotate(45 100 100)"
                        stroke-width="1"
                        stroke="#d3a410"
                        fill="none"
                        points="70,70 148,50 130,130 50,150"
                        id="bounce"
                      ></polygon>
                      <polygon
                        transform="rotate(45 100 100)"
                        stroke-width="1"
                        stroke="#d3a410"
                        fill="none"
                        points="70,70 148,50 130,130 50,150"
                        id="bounce2"
                      ></polygon>
                      <polygon
                        transform="rotate(45 100 100)"
                        stroke-width="2"
                        stroke=""
                        fill="#414750"
                        points="70,70 150,50 130,130 50,150"
                      ></polygon>
                      <polygon
                        stroke-width="2"
                        stroke=""
                        fill="url(#gradiente)"
                        points="100,70 150,100 100,130 50,100"
                      ></polygon>
                      <defs>
                        <linearGradient
                          y2="100%"
                          x2="10%"
                          y1="0%"
                          x1="0%"
                          id="gradiente"
                        >
                          <stop
                            style="stop-color: #1e2026; stop-opacity: 1"
                            offset="20%"
                          ></stop>
                          <stop
                            style="stop-color: #414750; stop-opacity: 1"
                            offset="60%"
                          ></stop>
                        </linearGradient>
                      </defs>
                      <polygon
                        transform="translate(20, 31)"
                        stroke-width="2"
                        stroke=""
                        fill="#b7870f"
                        points="80,50 80,75 80,99 40,75"
                      ></polygon>
                      <polygon
                        transform="translate(20, 31)"
                        stroke-width="2"
                        stroke=""
                        fill="url(#gradiente2)"
                        points="40,-40 80,-40 80,99 40,75"
                      ></polygon>
                      <defs>
                        <linearGradient
                          y2="100%"
                          x2="0%"
                          y1="-17%"
                          x1="10%"
                          id="gradiente2"
                        >
                          <stop
                            style="stop-color: #d3a51000; stop-opacity: 1"
                            offset="20%"
                          ></stop>
                          <stop
                            style="stop-color: #d3a51054; stop-opacity: 1"
                            offset="100%"
                            id="animatedStop"
                          ></stop>
                        </linearGradient>
                      </defs>
                      <polygon
                        transform="rotate(180 100 100) translate(20, 20)"
                        stroke-width="2"
                        stroke=""
                        fill="#d3a410"
                        points="80,50 80,75 80,99 40,75"
                      ></polygon>
                      <polygon
                        transform="rotate(0 100 100) translate(60, 20)"
                        stroke-width="2"
                        stroke=""
                        fill="url(#gradiente3)"
                        points="40,-40 80,-40 80,85 40,110.2"
                      ></polygon>
                      <defs>
                        <linearGradient
                          y2="100%"
                          x2="10%"
                          y1="0%"
                          x1="0%"
                          id="gradiente3"
                        >
                          <stop
                            style="stop-color: #d3a51000; stop-opacity: 1"
                            offset="20%"
                          ></stop>
                          <stop
                            style="stop-color: #d3a51054; stop-opacity: 1"
                            offset="100%"
                            id="animatedStop"
                          ></stop>
                        </linearGradient>
                      </defs>
                      <polygon
                        transform="rotate(45 100 100) translate(80, 95)"
                        stroke-width="2"
                        stroke=""
                        fill="#ffe4a1"
                        points="5,0 5,5 0,5 0,0"
                        id="particles"
                      ></polygon>
                      <polygon
                        transform="rotate(45 100 100) translate(80, 55)"
                        stroke-width="2"
                        stroke=""
                        fill="#ccb069"
                        points="6,0 6,6 0,6 0,0"
                        id="particles"
                      ></polygon>
                      <polygon
                        transform="rotate(45 100 100) translate(70, 80)"
                        stroke-width="2"
                        stroke=""
                        fill="#fff"
                        points="2,0 2,2 0,2 0,0"
                        id="particles"
                      ></polygon>
                      <polygon
                        stroke-width="2"
                        stroke=""
                        fill="#292d34"
                        points="29.5,99.8 100,142 100,172 29.5,130"
                      ></polygon>
                      <polygon
                        transform="translate(50, 92)"
                        stroke-width="2"
                        stroke=""
                        fill="#1f2127"
                        points="50,50 120.5,8 120.5,35 50,80"
                      ></polygon>
                    </g>
                  </svg>
                </div>
              </TabPane>
            </Tabs>
          </div>
        </div>
      </div>
      <div class="info-bottom">
        <span
          >{{ $srv.getI18nByValue('今年的第') }}{{ whatYearDay }}天，{{
            whatYearWeek
          }}周，{{ $srv.getI18nByValue('本月的第 ')
          }}{{ whatMonthWeek }} 周</span
        >
        <span> {{ $srv.getI18nByValue('日期') }} {{ today }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { T_data } from '@/obj/class';
import calendar from 'v-calendar/lib/components/calendar.umd';
import datePicker from 'v-calendar/lib/components/date-picker.umd';
import PopoverRow from 'v-calendar/lib/components/popover-row.umd.min';
import { I_cmd, T_cmd, T_srv, Tsrv, ifs, vue } from './config';
import pmMonths from './pmMonths.vue';
import pmWeeks from './pmWeeks.vue';

@T_srv.comp({
  components: {
    calendar,
    pmWeeks,
    pmMonths,
    datePicker,
    PopoverRow
  }
})
export default class oDateNav extends vue {
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({
    type: Object,
    default: () => {}
  })
  config!: any;

  @T_srv.ref('calendar') readonly calendarRef!: any;

  @T_srv.ref('weeks') readonly weeksRef!: any;

  @T_srv.ref('months') readonly monthRef!: any;

  split = 0.5;

  private name: string = 'log';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  // 监听类型
  private listenType: string = 'default';

  private _config: any = null;

  // 当前（日，周，月）组件
  private currentType: any = '';

  private selectDate: any = 'current';

  // 要展示的统计数据
  private statisticalData: any = {
    currentMonth: [],
    currentYear: [],
    total: []
  };

  // 当前显示的统计数据
  private currentStatisticalData: any = this.statisticalData.currentMonth;

  // 日期组件的 显示样式配置
  private attrs: any = [
    {
      key: 'today',
      // dot: 'red',
      highlight: {
        color: 'blue',
        fillMode: 'light'
      },
      dates: new Date()
    },
    {
      name: 'repair',
      highlight: {
        style: {
          backgroundColor: '#ccccff'
        },
        contentStyle: {
          color: '#fff'
        }
      },
      dates: []
    },
    {
      name: 'not',
      highlight: {
        style: {
          backgroundColor: '#ffadad'
        },
        contentStyle: {
          color: '#fff'
        }
      },
      dates: []
    },
    {
      name: 'already',
      highlight: {
        style: {
          backgroundColor: '#8de7ed'
        },
        contentStyle: {
          color: '#fff'
        }
      },
      dates: []
    }
  ];

  private dayTitle: string = '';

  private weekTitle: string = '';

  private monthTitle: string = '';

  // 当前日期
  private G_currDate: Date;

  private G_currWeek = {
    stratDate: null,
    endDate: null,
    sort: null
  };

  private G_currMonth = {
    stratDate: null,
    endDate: null,
    sort: null
  };

  // 数据操作类
  private GT_data: T_data;

  private layoutConfig: any = null;

  // input框 选择时间范围
  private rangeData: Array<string> = [];

  private range: any = {
    start: new Date(),
    end: new Date()
  };

  // 显示数据
  private today: string = '';

  private whatYearDay: number = 0;

  private whatYearWeek: number = 0;

  private whatMonthWeek: number = 0;

  @T_srv.watch('currentType')
  onValueChange(newVal: any, oldVal: any) {
    if (newVal === 'day') {
      this.formatDate(
        Tsrv.utils.getWhatDay(new Date(), 0, 'first'),
        Tsrv.utils.getWhatDay(new Date(), 0, 'last')
      );
    } else if (newVal === 'week') {
      // 这周时间范围
      const begin = Tsrv.utils.toDateString(
        Tsrv.utils.getWhatWeek(new Date(), 0, 1, 0),
        'yyyy-MM-dd HH:mm:ss'
      );
      const end = Tsrv.utils.toDateString(
        Tsrv.utils.getWhatWeek(new Date(), 1, 0, 0),
        'yyyy-MM-dd HH:mm:ss'
      );
      this.formatDate(
        Tsrv.utils.getWhatDay(begin, 0, 'first'),
        Tsrv.utils.getWhatDay(end, 0, 'last')
      );
    } else {
      // 这月时间范围
      const currentMonth = Tsrv.utils.toDateString(new Date(), 'MM');
      const currentYear = Tsrv.utils.toDateString(new Date(), 'yyyy');
      const monthData = `${currentYear}-${currentMonth}`;
      this.formatDate(
        Tsrv.utils.getWhatMonth(monthData, 0, 'first'),
        Tsrv.utils.getWhatMonth(monthData, 0, 'last')
      );
    }
    this.$nextTick(() => {
      const maxHeight: string = `calc(100vh - ${this.$refs['right-box']['offsetHeight']}px - 310px)`;
      document
        .getElementsByTagName('body')[0]
        .style.setProperty('--changeMaxHeight', maxHeight);
    });
    this.loadData();
  }

  // 留（备用）
  // @T_srv.watch('range', { deep: true })
  // onRangeChange(newVal: any, oldVal: any) {
  //   this.rangeData[0] = this.range.start;
  //   this.rangeData[1] = this.range.end;
  // }

  // @T_srv.watch('rangeData', { deep: true })
  // onRangeDataChange(newVal: any, oldVal: any) {
  //   this.$nextTick(() => {
  //     this.range.start = this.rangeData[0];
  //     this.range.end = this.rangeData[1];
  //   });
  // }

  created() {
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this._config = Tsrv.utils.clone(this.config, true);
    this.GT_command.init(this, this.GT_compBoxInfo);
    this.GT_command.newTcompCoordination(this.config);
    this.GT_data = new T_data();
    this.G_currDate = new Date();
  }

  mounted() {
    /*
     ** 后续组件优化
     ** 1、组件试图缩小 插件（autofit.js）
     ** 2、
     */
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);

    // 获取今日信息（月/周）
    this.getCurrentTimeInfo();
    // 根据配置 config 初始化数据
    this.init();

    /* 最终应用组件向外抛出引用实例,以供应用间调用 */
    // Tsrv.compBox.addCompMergeName(
    //   Tsrv.compBox.getDefGUID(), // 全局compBox
    //   '????',
    //   this,
    //   '???'
    // );
    if (this.config?.messageConfig?.custDefListener?.coordination) {
      this.$bus.$on(
        this.config.messageConfig.custDefListener.coordination,
        msg => {
          this.handleListener(msg);
          this.GT_command.receEventCoordination(msg);
        }
      );
    }
  }

  private init() {
    // 根据 config 确定初始 渲染表格是 日/周/月
    this.currentType = this.config.dateType;
    this.listenType = this.config['listenType'] || 'default';
  }

  public loadData() {
    this.messageEmit('search', Tsrv.utils.clone(this.rangeData, true));
  }

  // data时区
  // public getTime(data) {
  //   const time = new Date();
  //   const offset = time.getTimezoneOffset();
  //   const utc = time.getTime() + offset * 60 * 1000;
  //   const newTime = utc + 3600000 * data;
  //   const times = new Date(newTime);
  //   return times.toLocaleString();
  // }

  public formatDate(beginDate: Date, endDate: Date) {
    const begin = Tsrv.utils.toDateString(beginDate, 'yyyy-MM-dd HH:mm:ss');
    const end = Tsrv.utils.toDateString(endDate, 'yyyy-MM-dd HH:mm:ss');
    this.rangeData = [begin, end];
  }

  public dayClick(d: any): void {
    this.G_currDate = d.date;
    this.dayTitle = d.ariaLabel;
    this.formatDate(
      Tsrv.utils.getWhatDay(d.date, 0, 'first'),
      Tsrv.utils.getWhatDay(d.date, 0, 'last')
    );
    this.loadData();
  }

  public weekRowClick(data: any) {
    this.G_currWeek.stratDate = data.beginDate;
    this.G_currWeek.endDate = data.endDate;
    this.G_currWeek.sort = data.weeks;
    this.G_currDate = data.beginDate;
    this.weekTitle = data.week;
    this.formatDate(
      Tsrv.utils.getWhatDay(data.beginDate, 0, 'first'),
      Tsrv.utils.getWhatDay(data.endDate, 0, 'last')
    );
    this.loadData();
  }

  public monthClicks(data: any) {
    this.monthClick(data.months);
    this.G_currDate.setMonth(data.months - 1);
    this.G_currDate.setDate(1);
    this.weekTitle = `${data.months}月`;
    const selectMonth: string =
      data.months < 10 ? `0${data.months}` : `${data.months}`;
    const currentYear = Tsrv.utils.toDateString(new Date(), 'yyyy');
    const monthData = `${currentYear}-${selectMonth}`;
    this.formatDate(
      Tsrv.utils.getWhatMonth(monthData, 0, 'first'),
      Tsrv.utils.getWhatMonth(monthData, 0, 'last')
    );
    this.loadData();
  }

  public monthClick(num: number): void {
    const dt: Date = new Date();
    // 遇到2月抽象出1日比较保险
    dt.setDate(1);
    // 0-11 表示月
    dt.setMonth(num - 1);
    // 同步周
    // this.weeksRef.setWeekData(dt);
    // 同步月
    this.monthRef.setShowCurrMonth(num);
  }

  // public yearChange(): void {
  //   this.monthAct = 1;
  //   this.monthClick(1);
  // }

  public search() {
    let flag = true;
    if (Tsrv.utils.noValue(this.rangeData)) {
      flag = false;
    } else {
      this.rangeData.forEach(item => {
        if (Tsrv.utils.noValue(item)) {
          flag = false;
        }
      });
    }
    if (flag) {
      this.loadData();
    } else {
      this.$Message.warning(Tsrv.getI18nByValue('请输入完整的时间范围'));
    }
  }

  public handleChange(e) {
    if (!Tsrv.utils.noValue(e)) {
      e.forEach((item, key) => {
        e[key] = Tsrv.utils.toDateString(item, 'yyyy-MM-dd HH:mm:ss');
      });
      this.rangeData = e;
    }
  }

  /**
   * 发送外部事件
   */
  public messageEmit(type: string, date: any) {
    const receivers = this.config.messageConfig.emitActions[type] || [];
    receivers.forEach((item: any) => {
      item.msg.listenType = this.listenType;
      if (type === 'search') {
        item.msg.content.val = date;
        item.msg.content.fliter = 'range';
        const toID = item.toID.toString();

        if (this.listenType === 'default') {
          this.$bus.$emit(toID, item.msg);
        } else {
          this.$mbus.$emit(toID, item.msg);
        }
      }
    });
  }

  /**
   * 获取当前时间信息
   */
  getCurrentTimeInfo() {
    const now = new Date();
    this.today = Tsrv.utils.toDateString(now, 'yyyy-MM-dd');
    this.whatYearDay = Tsrv.utils.getYearDay(now); // 今年的第几天
    // Tsrv.utils.getDayOfYear(now); // 今年的多少天
    this.whatYearWeek = Tsrv.utils.getYearWeek(now); // 今年的第几周
    this.whatMonthWeek = Tsrv.utils.getMonthWeek(now); // 今月的第几周
  }

  getFrontDateInfo() {
    Tsrv.utils.getWhatDay('2017-12-20', -1, 'first'); // last
  }

  private handleListener(msg: any) {
    if (msg?.action?.toolbar === 'refresh' || msg?.action?.toolbar === 'save') {
      // 加载数据
      // msg.formComp.funName
      const nextCompName = Object.keys(
        this.config.messageConfig.eventGroup[''].children[0]
      )[0];
      if (nextCompName === msg?.fromComp.funName) {
        this.GT_command.getTableData();
      }
    }
  }

  destroyed() {
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    // this.GT_compBox = null
    if (this.config?.messageConfig?.custDefListener?.coordination) {
      this.$bus.$off(this.config.messageConfig.custDefListener.coordination);
    }
  }
}
</script>
<style lang="scss" scoped>
$changeMaxHeight: var(--changeMaxHeight, '170px');
.containers {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--dateNav-bg-color); //#f6fffe
  font-size: 12px;
  .log {
    // background: var(--dateNav-bg-color);
    .log-nav {
      width: 100%;
      margin: 0 auto;
      min-width: 280px;
      height: calc(100% - 40px);
      border: 1px solid #0000001c;
      display: flex;
      flex-direction: column;
      justify-content: start;
      .date-body {
        .nav-title {
          background-color: var(--date-nav-title-bg-color); // #e7f0ff
          line-height: 30px;
          text-align: center;
          font-weight: 700;
        }
        .sle-date {
          display: flex;
          justify-content: center;
          align-items: center;
          letter-spacing: 1px;
          margin-top: 8px;
          // ::v-deep .ivu-date-picker {
          //   .ivu-select-dropdown {
          //     // width: 100px;
          //     // transform: scale();
          //   }
          // }
        }
        .data-content {
          margin: 8px 2px 8px;
          .date_radio {
            width: 100%;
            margin: 10px 0;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            .radio_left {
              margin-left: 10px;
            }
          }
          .main_box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .left_box {
              display: flex;
              align-items: center;
              ::v-deep .ivu-radio-group {
                .ivu-radio-group-item {
                  display: flex;
                  flex-direction: column;
                  height: 50px;
                  line-height: 15px;
                }
                .ivu-radio-wrapper {
                  margin-right: 0;
                }
              }
            }
            .right_box {
              flex: 1;
              text-align: center;
            }
          }
          .nav-option {
            width: 100%;
            background-color: var(--date-nav-calendar-bg-color);
          }
        }
      }

      .info-body {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        .info-title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .info-content {
          height: 100%;
          // display: flex;
          // flex-direction: column;
          // justify-content: center;
          // .info-overview {
          //   flex: 2;
          //   padding-left: 10px;
          //   .current-title {
          //     font-size: 14px;
          //     font-weight: bold;
          //     margin-bottom: 10px;
          //   }
          //   .info-current-list {
          //     > li {
          //       list-style: inside;
          //       line-height: 2;
          //       overflow: hidden;
          //       white-space: nowrap;
          //       text-overflow: ellipsis;
          //     }
          //     li + li {
          //       border-top: 1px dashed #e8eaec;
          //     }
          //   }
          // }
          // .info-overview {
          //   flex: 1;
          // }
          ::v-deep .ivu-tabs {
            border-radius: 5px;
            .ivu-tabs-content {
              .ivu-tabs-tabpane {
                .panelList {
                  height: initial; //恢复默认样式
                  max-height: $changeMaxHeight;
                  text-align: center;
                  line-height: 10px;
                }
                .no-info {
                  height: 100%;
                  display: flex;
                  flex-direction: row;
                  justify-content: space-around;
                  align-items: center;
                  @keyframes bounce {
                    0%,
                    100% {
                      translate: 0px 36px;
                    }
                    50% {
                      translate: 0px 46px;
                    }
                  }
                  @keyframes bounce2 {
                    0%,
                    100% {
                      translate: 0px 46px;
                    }
                    50% {
                      translate: 0px 56px;
                    }
                  }

                  @keyframes umbral {
                    0% {
                      stop-color: #d3a5102e;
                    }
                    50% {
                      stop-color: rgba(211, 165, 16, 0.519);
                    }
                    100% {
                      stop-color: #d3a5102e;
                    }
                  }
                  @keyframes partciles {
                    0%,
                    100% {
                      translate: 0px 16px;
                    }
                    50% {
                      translate: 0px 6px;
                    }
                  }
                  #particles {
                    animation: partciles 4s ease-in-out infinite;
                  }
                  #animatedStop {
                    animation: umbral 4s infinite;
                  }
                  #bounce {
                    animation: bounce 4s ease-in-out infinite;
                    translate: 0px 36px;
                  }
                  #bounce2 {
                    animation: bounce2 4s ease-in-out infinite;
                    translate: 0px 46px;
                    animation-delay: 0.5s;
                  }
                }
                .panel-list {
                  height: 100%;
                  > ul {
                    height: 100%;
                    li {
                      list-style: inside;
                      margin: 5px 5px 0;
                      padding: 5px 5px 10px;
                      border-bottom: 1px dashed #c5c8ce;
                    }
                  }
                }
              }
            }
          }
          .textAction {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .info-bottom {
      width: 100%;
      height: 40px;
      line-height: 16px;
      border-top: 1px solid #0000000a;
      color: #66666696;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      flex-wrap: nowrap;
      padding: 5px 10px 5px 5px;
      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  ::v-deep .ivu-tabs-content {
    background-color: #fff;
  }
}
</style>
